<template>
	<div class="addProject business-workAdd">
		<div class="addForm zll-form">
			<el-form :model="form" ref="addForm" :rules="rules" class="demo-ruleForm">
				<el-row :gutter="40">
					<el-col :span="8">
						<el-form-item class="formList" label="报修日期：">
							<el-input v-model="form.reportingTime" disabled></el-input>
						</el-form-item>
						<el-form-item class="formList" label="工段工序：">
							<el-input v-model="form.procedures" disabled></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item class="formList" label="设备号：">
							<el-input v-model="form.equipmentNumber" disabled></el-input>
						</el-form-item>
						<el-form-item class="formList" label="设备名称：">
							<el-input v-model="form.equipmentName" disabled></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item class="formList" label="报修人：">
							<el-input v-model="form.repairName" disabled></el-input>
						</el-form-item>
                        <el-form-item class="formList" label="故障描述：">
							<el-input v-model="form.faultDescription" disabled></el-input>
						</el-form-item>
					</el-col>
				</el-row>
                <el-row :gutter="40" v-if="status == '1' || status == '2'">
					<el-col :span="8">
						<el-form-item class="formList" label="受理日期：">
							<el-input v-model="form.acceptanceTime" disabled></el-input>
						</el-form-item>
						
					</el-col>
                    <el-col :span="8">
                        <el-form-item class="formList" label="响应时间：">
							<el-input v-model="form.responseTime" disabled></el-input>
						</el-form-item>
                    </el-col>
					<el-col :span="8">
						<el-form-item class="formList" label="受理人：">
							<el-input v-model="form.acceptanceName" disabled></el-input>
						</el-form-item>
					</el-col>
                    
				</el-row>
                <el-row :gutter="40" v-if="status == '1' && type">
					<el-col :span="8">
						<el-form-item class="formList" prop="maintenanceContent" label="维修内容：">
							<el-input v-model="form.maintenanceContent"></el-input>
						</el-form-item>
					</el-col>
                    <el-col :span="8">
                        <el-form-item class="formList" prop="workNames" label="维修人：">
							<!-- <el-input v-model="form.workNames"></el-input> -->
							<el-select v-model="form.workNames" multiple placeholder="请选择" collapse-tags>
								<el-option v-for="item in workNameList" :key="item.value" :label="item.label" :value="item.value">
								</el-option>
							</el-select>
						</el-form-item>
                    </el-col>
					<el-col :span="8">
						<el-form-item class="formList" prop="completionTime" label="完工时间：">
							<el-input v-model="form.completionTime" disabled></el-input>
						</el-form-item>
					</el-col>
				</el-row>
                <el-row :gutter="40" v-if="status == '1' && type">
					<el-col :span="8">
						<el-form-item class="formList" prop="repairTime" label="维修耗时：">
							<el-input v-model="form.repairTime" disabled></el-input>
						</el-form-item>
					</el-col>
                    <el-col :span="8">
                        <el-form-item class="formList" prop="completionName" label="完工人：">
							<el-input v-model="form.completionName" disabled></el-input>
						</el-form-item>
                    </el-col>
				</el-row>
                <el-row :gutter="40" v-if="status == '3'">
					<el-col :span="8">
						<el-form-item class="formList" label="取消人：">
							<el-input v-model="form.cancelName" disabled></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item class="formList" label="取消原因：">
							<el-input v-model="form.cancelReason" disabled></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<template v-if="status=='2'">
					<el-row :gutter="40" >
						<el-col :span="8">
							<el-form-item class="formList" label="维修内容：">
								<el-input v-model="form.maintenanceContent" disabled></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item class="formList" label="维修人：">
								<el-input v-model="form.maintenanceName" disabled></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item class="formList" label="完工时间：">
								<el-input v-model="form.completionTime" disabled></el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="40">
						<el-col :span="8">
							<el-form-item class="formList" label="维修耗时：">
								<el-input v-model="form.repairTime" disabled></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item class="formList" label="完工人：">
								<el-input v-model="form.completionName" disabled></el-input>
							</el-form-item>
						</el-col>
				   </el-row>
  				 </template>
			</el-form>
		</div>
	</div>
</template>
<script>
	export default {
        props:{
            data:{
                type: Object,
            },
            status:{
                type: String,
            },
            type:{
                type: Boolean,
            },
        },
		data() {
			return {
				form:{},
				rules:{
					maintenanceContent:[
						{ required: true, message: '请输入维修内容', trigger: 'blur' },
						{ max: 50, message: '长度最多50个字符', trigger: ['blur', 'change'] }
					],
					workNames:[
						{ required: true, message: '请输选择维修人', trigger: 'blur' },
					],
					
				},
				workNameList:[]
			}
		},
        mounted() {
            this.form = this.data;
			let userInfo = JSON.parse(sessionStorage.getItem("loginFlag"));
			this.form.completionName = userInfo.userName;
			this.getDate();
			if(this.status == '1' && this.type){
				this.queryNames();
			}
            // this.queryInfo();
		},
		methods: {
			// queryInfo(){
            //     let self = this;
            //     self.$http({
            //         url: "/jinl/repairReport/getPcDetailById",
            //         method: "post",
            //         data: JSON.stringify({id:this.id}),
            //         dataType: 'json',
            //         contentType: "application/json",
            //     }).then(res=>{
            //         if(res.success){
            //             this.form = res.result;
            //         }
            //     })
            // }
			queryNames(){
				// let data = {
				// 	roleName:'报修班组'
				// }
				this.$http({
					url: "/jinl/login/getLoginList",
					method: "post",
					dataType: 'json',
					contentType: "application/json",
				}).then(res=>{
					if(res.success){
						this.workNameList = res.result.map(res=>{
							return {
								label:res.userName,
								value:res.userName
							}
						})
					}else{
						this.$message({
							message: '取消失败！',
							type: 'error'
						});
					}
					
				})
			},
			submitForm(){
				let self = this;
				let data = {
					"id": self.form.id,
					"equipmentName": self.form.equipmentName,
					"maintenanceContent": self.form.maintenanceContent,
					"maintenanceName": "",
					"completionTime": self.form.completionTime,
					"repairTime": self.form.repairTime,
					"completionName": self.form.completionName,
					"type":"2" //1是报修 2是维修
				}
				this.form.workNames.forEach(res=>{
					data.maintenanceName += res.value + ","
				})
				console.log("data", data);
				this.$http({
					url: "/jinl/repairReport/updateByPcReport",
					method: "post",
					data: JSON.stringify(data),
					dataType: 'json',
					contentType: "application/json",
				}).then(res=>{
					if(res.success){
						this.$message({
							message: '完工提交完成！',
							type: 'error'
						});
						this.$emit("backSumbit")
					}else{
						this.$message({
							message: '完工提交失败！',
							type: 'error'
						});
					}
				})
			},
			getDate(){
				let nowTime = new Date().getTime()
				this.form.completionTime = this.getTime(nowTime);
				let date = (new Date(this.form.reportingTime.replace(/-/g, "/"))).getTime();
				let time = Math.abs(nowTime - date);
				let totalMinutes = Math.floor(time / 60000);
				let hours = Math.floor(totalMinutes / 60) ;
				let min = totalMinutes % 60;
				this.form.repairTime = (hours != 0 ? hours + "小时" : "" ) + (min < 10 ? '0' + min : min) + "分钟";
			},
			getTime(time) {
				var date = new Date(time);
				var y = date.getFullYear();
				var m = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1);
				var d = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate());
				var h = (date.getHours() < 10 ? '0' + (date.getHours()) : date.getHours());
				var M = (date.getMinutes() < 10 ? '0' + (date.getMinutes()) : date.getMinutes());
				return y + '-' + m + '-' + d + " " + h + ":" + M 
			},
		},
	}
</script>
<style lang="scss" scoped>
	@import "@/style/dialog.scss";

	.edit {
		color: #1890ff;
		padding: 0 5px;
		cursor: pointer;

		&.icons {
			font-size: 16px;
		}

		&:hover {
			opacity: .7;
		}
	}

	.formList {
		margin-bottom: 8px !important;
	}
</style>